<%--
  Created by IntelliJ IDEA.
  User: Tsuki
  Date: 2023-07-13
  Time: 18:37
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://wego.com/format" prefix="f" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品添加更新</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/showBigImage.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css" media="all">
</head>
<body>

<div class="layuimini-container ">
    <div class="layuimini-main">
        <form class="layui-form layui-row layui-col-space16" action="">

            <%--商品编号--%>
            <input type="text" name="id" autocomplete="off" value="${goods.id}" hidden>
            <%--商品名称--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称:</label>
                <div class="layui-input-block">
                    <input type="text" lay-verify="required" name="name"
                           autocomplete="off" class="layui-input" value="${goods.name}" placeholder="请输入商品名称">
                </div>
            </div>

            <%--商品状态--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品状态:</label>
                <div class="layui-input-block">
                    <c:if test="${goods.state==1}">
                        <input type="checkbox" lay-verify="required" value="1" name="state" lay-skin="tag" title="上架"
                               autocomplete="off"   checked>
                        <input type="checkbox" lay-verify="required" value="0" name="state" lay-skin="tag" title="下架"
                               autocomplete="off"  >
                    </c:if>

                    <c:if test="${goods.state==0}">
                        <input type="checkbox" lay-verify="required"  value="1" name="state" lay-skin="tag" title="上架"
                               autocomplete="off"   >
                        <input type="checkbox" lay-verify="required"   value="0" name="state" lay-skin="tag" title="下架"
                               autocomplete="off" checked >
                    </c:if>

                    <c:if test="${goods.state==null}">
                        <input type="checkbox"   name="state" value="1"  lay-skin="tag" title="上架"
                               autocomplete="off"   >
                        <input type="checkbox"   name="state" value="0" lay-skin="tag" title="下架"
                               autocomplete="off"  >
                    </c:if>

                </div>
            </div>

                <div class="layui-form-item" >
                    <label class="layui-form-label">商品类别:</label>
                    <div class="layui-input-block" style="display: flex;">
                        <select id="category1" lay-filter="cateGoryName1" class="cateGoryName" lay-affix="clear">
                            <option value="-1">一级类别</option>
                        </select>
                        <select name="categoryId" lay-filter="cateGoryName2" id="category2" lay-affix="clear"  >
                            <option value="-1">二级类别</option>
                        </select>
                    </div>
                </div>

            <%--商品主图--%>
            <div class="layui-form-item ">
                <input type="text" id="goodsPicName" name="pic" autocomplete="off" hidden>
                <label class="layui-form-label">商品主图:</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" id="goodsPic-upload-btn">
                        <i class="layui-icon layui-icon-upload"></i> 单图片上传
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="goodsPic"
                                 style="width: 100%; height: 92px;">
                            <div id="ID-upload-demo-text"></div>
                        </div>
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes"
                             lay-filter="filter-demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>

            <%--商品图集--%>
            <div class="layui-form-item ">
                <input type="text" id="goodsImgs" name="imgs" autocomplete="off" hidden>
                <label class="layui-form-label">商品图集:</label>
                <div class="imgs" style="display:flex">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="goodsImgsUpload-btn">
                            <i class="layui-icon layui-icon-upload"></i> 多图片上传
                        </button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                            预览图：
                            <div class="layui-upload-list" id="upload-demo-preview"></div>
                        </blockquote>
                    </div>
                </div>
            </div>

            <%--市场价格--%>
            <div class="layui-form-item">
                <label class="layui-form-label">市场价格:</label>
                <div class="layui-input-block">
                    <input type="number" name="price1"
                           autocomplete="off" class="layui-input" lay-verify="required|number" value="${goods.price1}" placeholder="请输入商品市场价格">
                </div>
            </div>

            <%--会员价格--%>
            <div class="layui-form-item">
                <label class="layui-form-label">会员价格:</label>
                <div class="layui-input-block">
                    <input type="number" name="price2"
                           autocomplete="off" class="layui-input" lay-verify="required|number" value="${goods.price2}" placeholder="请输入商品会员价格">
                </div>
            </div>

            <%--库存--%>
            <div class="layui-form-item">
                <label class="layui-form-label">库存:</label>
                <div class="layui-input-block">
                    <input type="number" name="storage"
                           autocomplete="off" class="layui-input" value="${goods.storage}"lay-verify="required|number" placeholder="请输入库存数量">
                </div>
            </div>

            <%--单位--%>
            <div class="layui-form-item">
                <label class="layui-form-label">单位:</label>
                <div class="layui-input-block">
                    <input type="text" name="unit"
                           autocomplete="off" class="layui-input" value="${goods.unit}" lay-verify="required" placeholder="请输入商品数量单位">
                </div>
            </div>

            <%--卖点--%>
            <div class="layui-form-item">
                <label class="layui-form-label">卖点:</label>
                <div class="layui-input-block">
                    <input type="text" name="sellingPoint"
                           autocomplete="off" class="layui-input" value="${goods.sellingPoint}" placeholder="请输入商品卖点">
                </div>
            </div>

            <%--优先级--%>
            <div class="layui-form-item">
                <label class="layui-form-label">优先级:</label>
                <div class="layui-input-block">
                    <input type="number" name="priority"
                           autocomplete="off" class="layui-input" value="${goods.priority}" lay-verify="required|number" placeholder="请输入商品展示优先级">
                </div>
            </div>

            <%--商品简介--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品简介:</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" placeholder="请输入商品简介" name="info">${goods.info}</textarea>
                </div>
            </div>

            <%--商品规格--%>
            <div class="layui-form-item">
                <label class="layui-form-label">商品规格</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" placeholder="请输入商品规格" name="specs">${goods.specs}</textarea>
                </div>
            </div>

            <%--操作按钮--%>
            <div class="layui-form-item" style="padding-left: 1100px">
                <div class="layui-btn-container ">
                    <button type="reset" class="layui-btn layui-btn-normal layui-row-xs">
                        清空
                    </button>
                    <button id="goods_submit" class="layui-btn layui-btn-danger layui-row-xs" lay-submit
                            lay-filter="goodsSubmit"> 提交
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>

<script>

    layui.use(['form', 'table', 'element', 'layer'], function (message) {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        upload = layui.upload;
        element = layui.element;

        form.on('submit(goodsSubmit)', function (data) {
            var formData = data.field; // 获取表单数据
            $.ajax({
                url: '${pageContext.request.contextPath}/manager/goods/addUpdate',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function (result) {
                    var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引
                    parent.layer.close(index); // 关闭当前 iframe 弹层
                },
                error: function () {
                }
            });
            return false;
        });

        /**
         * 加载一级类别选择框内容
         */
        $.ajax({
            url: '${pageContext.request.contextPath}/manager/category/list_id_name',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // 动态添加新的选项
                $.each(data, function (index, item) {
                    var option = $('<option></option>').val(item.id).text(item.name);
                    $('.cateGoryName').append(option);
                });
                form.render();
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('获取数据失败');
            }
        });

        form.on('select(cateGoryName1)', function(data){
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            $.ajax({
                type: 'GET',
                dataType: 'json',
                data:{
                    pid:value,
                },
                url: "${pageContext.request.contextPath}/manager/category/selectIdNameByPid",
                success: function (data) {
                    $("#category2").empty();
                    $.each(data, function (index, item) {
                        $("#category2").append("<option value=" + item.id + ">" + item.name + "</option>");
                    })
                    form.render();
                }
            })
        });



        // 单图片上传
        var uploadInst = upload.render({
            elem: '#goodsPic-upload-btn',
            url: '${pageContext.request.contextPath}/goods/fileUpload',
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#goodsPic').attr('src', result); // 图片链接（base64）
                    //上传成功后将隐藏域的商品图片值设置为文件名
                    var goodsPicName = document.getElementById("goodsPicName");
                    goodsPicName.value = file.name;
                });
                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },

            done: function (res) {
                // 若上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function () {
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function (n, elem, e) {
                element.progress('filter-demo', n + '%');
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


        // 多图片上传
        var uploadInst = upload.render({
            elem: '#goodsImgsUpload-btn', //绑定上传按钮的选择器
            url: '${pageContext.request.contextPath}/goods/imgsUpload', //上传接口的URL地址
            multiple: true, //允许同时选择多张图片
            choose: function (obj) {
                var fileNames = [];
                var goodsImgs = document.getElementById("goodsImgs");
                obj.preview(function (index, file, result) {
                    $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">');
                    fileNames.push(file.name);
                    goodsImgs.value = fileNames.toString();
                });
               fileNames.join(",");

            },
            done: function (res) {
                //上传成功的回调函数
            }
        });
    });
</script>
</body>
</html>

